<template>
  <div class="list-area">
    <div class="_head">
      <ul>
        <li class="orange">精品推荐</li>
        <li>最新优惠</li>
        <li>海淘现货</li>
        <li>
          <span class="el-icon-menu" title="橱窗模式"></span>
        </li>
        <li>
          <span class="el-icon-s-operation corange" title="列表模式"></span>
        </li>
      </ul>
    </div>
    <div class="_body">
      <!-- 如果是橱窗模式,则使用橱窗组件循环 否使用列表模式 -->
      <div v-if="isList">
        <ilist :data="listItem"></ilist>
      </div>
    </div>
  </div>
</template>
<script>
import ilist from "@/components/item/ilist";
export default {
  components: {
    ilist
  },
  data() {
    return {
      isList: true,
      listItem: [
        {
          img: require('../../assets/images/item/i1.png'),
          type: "雨果博士",
          title: "S码 男款修身纯棉",
          desc: "目前图片色S码此价!",
          money:'￥243.4',
          author: "筱筱",
          time: "2017-09-10",
          link: "www.baidu.com"
        },
        {
          img: require('../../assets/images/item/i1.png'),
          type: "雨果博士",
          title: "S码 男款修身纯棉",
          desc: "目前图片色S码此价!",
          money:'￥243.4',
          author: "筱筱",
          time: "2017-09-10",
          link: "www.baidu.com"
        }
      ]
    };
  }
};
</script>
<style lang="less">
.list-area {
  margin-top: 21px;
  padding: 0 25px;
  background: url("../../assets/images/cr.png") no-repeat;
  background-color: #fff;
}
._head {
  height: 53px;
  border-bottom: 1px solid #d7d7d7;
  li {
    float: left;
    line-height: 53px;
    margin: 0 15px;
    cursor: pointer;
  }
  li:nth-child(1)::after,
  li:nth-child(2)::after {
    content: "";
    height: 16px;
    border-left: 1px solid #c5c5c5;
    margin-left: 10px;
  }
  li:nth-child(4),
  li:nth-child(5) {
    float: right;
    font-size: 18px;
    margin: 0 5px 0 5px;
  }
}
</style>